<template>
    <!-- 申请加入团队的弹窗 -->
    <el-dialog v-model="dialogVisible" title="申请加入团队" width="700px">
        <!-- 搜索区域 -->
        <el-row :gutter="16" align="middle" justify="center">
            <el-col :span="16">
                <el-input v-model="searchKey" placeholder="请输入团队名称或团队编号" />
            </el-col>
            <el-col :span="3">
                <el-button type="primary" block @click="handleSearch">搜索</el-button>
            </el-col>
        </el-row>

        <!-- 弹窗底部：取消按钮 -->
        <template #footer>
            <el-button class="cancel-button" @click="dialogVisible = false">取消</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue';

//控制弹窗显示的响应式变量
const dialogVisible = ref(false);
//搜索关键字
const searchKey = ref('');

//暴露给父组件的方法：打开弹窗
const openDialog = () => {
    dialogVisible.value = true;
};

//搜索逻辑
const handleSearch = () => {
    console.log('搜索内容：', searchKey.value);

};

//暴露方法，让父组件能调用
defineExpose({
    openDialog
});
</script>

<style scoped>
.el-dialog__body {
    padding: 24px;
}

/* 修改 placeholder 颜色 */
::v-deep .el-input__inner::placeholder {
    color: #ccc;
    /* 浅灰色，可按需调整 */
}

.cancel-button {
    margin-top: 300px;
}
</style>